import React, { Component } from 'react';
import PropTypes from "prop-types";
import {
    View,
    StyleSheet,
    TouchableHighlight,
    Image,
    ScrollView,
    FlatList,
    ListView,
    VirtualizedList,
    SectionList,
    Platform
} from 'react-native';

export default class BackToTopContainer extends Component{
    constructor(props) {
        super(props);
        this.state={
            //isShow:true
        }
    }

    backToTopFun = ()=> {
        if(typeof this.props.clickEvent === "function"){
            const ref = this.props.clickEvent();
            if(ref.scrollTo){
                ref.scrollTo({x: 0, y: 0, animated: true});
            }else if(ref.scrollToOffset){
                ref.scrollToOffset({animated:true,x:0,y:0})
            }
        }
    }
    render(){

        let {imgStyle,imgUrl,containerPosition,isShow}=this.props;
        let icon=imgUrl?imgUrl:require('../../assets/backToTop_rocket_1.png');

        if(isShow){
            return  (
                <View style={[styles.flexContainer,containerPosition && containerPosition]}>
                    <TouchableHighlight
                        onPress={this.backToTopFun}
                        underlayColor='transparent'
                    >
                        <Image
                            style={[styles.backToTop,imgStyle && imgStyle]}
                            source={icon}
                        />
                    </TouchableHighlight>
                </View>
            )
        }else{
            return <View/>
        }
    }
}

BackToTopContainer.propTypes={
    clickEvent:PropTypes.func,
    imgUrl: PropTypes.any,
    imgStyle: PropTypes.any,
    containerPosition: PropTypes.any,
    isShow:PropTypes.bool
}
BackToTopContainer.defaultProps={
    isShow:true
}

const styles = StyleSheet.create({
    flexContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        bottom:30,
        right: 15,
        zIndex:1001,
        width:50,
        height:50
    },
    backToTop: {
        width: 50,
        height: 50
    }
});